<template lang="html">
    <div class="box">
        <div class="t_header">
            <el-form :inline="true" label-width="100px" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="supplierName" placeholder="供应商姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="el_button" @click="onSubmit(1)">查询</el-button>
              </el-form-item>
            </el-form>
        </div>

        <div class="body">
            <el-table :data="tableData.list" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="sm_name" label="供应商姓名" width="180" align="center"></el-table-column>
                <el-table-column prop="oil_name" label="油品名称" align="center"></el-table-column>
                <el-table-column label="油品图片" width="100" align="center">
                  <template slot-scope="scope">
                     <div class="el-table_img">
                        <img :preview="scope.row.cover" class="preview-img" :src="scope.row.cover" alt="">
                     </div>
                 </template>
                </el-table-column>
                <el-table-column prop="price" label="油品结算价" align="center"></el-table-column>
                <el-table-column prop="about" label="油品详情" align="center"></el-table-column>
                <el-table-column label="质量保证书" width="100" align="center">
                  <template slot-scope="scope">
  <div class="el-table_img">
    <img preview="0"
         class="preview-img"
         :src="scope.row.quality_certificate"
         alt="">
  </div>
</template>
                </el-table-column>
                <el-table-column label="质检报告" width="100" align="center">
                  <template slot-scope="scope">
  <div class="el-table_img">
    <img preview="0"
         class="preview-img"
         :src="scope.row.quality_inspection_report"
         alt="">
  </div>
</template>
                </el-table-column>
                <el-table-column label="质量承保书" width="100" align="center">
                  <template slot-scope="scope">
  <div class="el-table_img">
    <img preview="0"
         class="preview-img"
         :src="scope.row.quality_undertaking"
         alt="">
  </div>
</template>
                </el-table-column>

            </el-table>
            <el-pagination
              layout="prev, pager, next"
              :page-count="tableData.rows"
              :current-page="currentPage"
               @current-change="changePage" align="center">
            </el-pagination>
        </div>

    </div>
</template>

<script>
export default {
  data () {
    return {
      token: this.$store.state.user.token3,
      supplierName: '',
      tableData: [],
      currentPage:1
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.supplierName = to.query.name || '';
      vm.onSubmit(1)
    });
  },
/* eslint-enable */
  methods: {
    onSubmit (page = 1) {
      this.currentPage = page;
      this.$http2.getOilIndexList({
        sm_name: this.supplierName,
        page: page
      }).then(res => {
        if (res.data.code == 1) {
          this.tableData = res.data.data;
          for (var i = 0; i < this.tableData.list.length; i++) {
            for (var j = 0; j < this.tableData.list[i].detail.length; j++) {
              this.tableData.list[i].detail[j].sm_id =
              this.tableData.list[i].sm_id
              this.tableData.list[i].detail[j].sm_name =
              this.tableData.list[i].sm_name
              this.tableData.list[i].detail[j].quality_certificate =
              this.tableData.list[i].quality_certificate
              this.tableData.list[i].detail[j].quality_undertaking =
              this.tableData.list[i].quality_undertaking
              this.tableData.list[i].detail[j].quality_inspection_report =
              this.tableData.list[i].quality_inspection_report
            }
          }
          for (var i = 0; i < this.tableData.list.length; i++) {
            this.tableData.list[i] = this.tableData.list[i].detail
          }

          this.tableData.list = Array.prototype.concat.apply([], this.tableData.list)

        } else {
          this.tableData = []
        }
        this.$previewRefresh();
      })
    },
    changePage (e) {
      this.onSubmit(e)
    },

    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex >= 5 || columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }

  }
/* eslint-enable */
}
</script>
<style lang="css" scoped>
@import "../../my-style/app.css";
.preview-img {
  display: block;
  width: 100%;
  height: 30px;
}
</style>
